<template>
    <Map3D :defaultOptions="defaultOptions"></Map3D>
</template>

<script>
    import Map3D from "../../../components/common/Cahrts/pie3d"

    export default{
        data() {
            return {
                defaultOptions: {
                    chart: {
                        type: 'pie',
                        backgroundColor: "#010542",
                        options3d: {
                            enabled: true,
                            alpha: 55,
                            beta: 0,
                            // viewDistance: 105,
                        }
                    },
                    title: {
                        text: '12312',
                        verticalAlign: "bottom",
                        style: {
                            color: '#fff',
                            fontWeight: 'bold',
                            fontSize: "40px",
                        }
                    },
                    tooltip: {
                        enabled: true,
                        shared: true,
                        useHTML: true,
                        headerFormat: '<small style="font-size:60px;">{point.key}</small><table>',
                        pointFormat: '<tr><td style="color: {series.color};font-size: 60px;">{series.name}: </td>' +
                            '<td style="text-align: right;font-size: 60px;"><b style="font-size: 60px;">{point.y}</b></td></tr>',
                        footerFormat: '</table>',
                        valueDecimals: 2,

                        borderRadius:20,
                        borderWidth:4,
                        borderColor:"#48AFFF",
                        backgroundColor:"#010541",
                        padding:20,
                    },

                    plotOptions: {
                        pie: {
                            colors: ["#851DFF", "#F6A228", "#E45932", "#FEAC9C", "#00FEFF", "#006BFE", "#8A2FFF"],
                            allowPointSelect: true,
                            cursor: 'pointer',
                            depth: 35,
                            distance: '100%',
                            // innerSize:100,
                            size: 240,
                            dataLabels: {
                                enabled: true,
                                format: '{point.name}',
                                style: {
                                    fontSize: "30px",
                                    color: '#fff',
                                    textOutline: 'none'
                                }
                            }
                        }
                    },
                    credits: {
                        enabled: false // 禁用版权信息
                    },
                    series: [{
                        type: 'pie',
                        name: '浏览器占比',
                        data: [
                            ['Firefox', 45.0],
                            ['IE', 26.8],
                            {
                                name: 'Chrome',
                                y: 12.8,
                                sliced: true,
                                selected: true
                            },
                            ['Safari', 8.5],
                            ['Opera', 6.2],
                            ['Others', 0.7]
                        ]
                    }]
                },
            }
        },

        components:{
            Map3D
        }
    }
</script>
